<template>
    <div class="dialog_info">
      <div class="dialog_info_title" >
        <el-row>
          <div class="subtitle">基本信息</div>
            <div class="JibenTable2">
              <ul>
                <li><div><div>行政区</div><div>{{TybDetailDataList.ADNM ? TybDetailDataList.ADNM : '--' }}</div></div></li>
                <li><div><div>编码</div><div>{{TybDetailDataList.ADCD ? TybDetailDataList.ADCD : '--' }}</div></div></li>
                <li><div><div>河流名称</div><div>{{TybDetailDataList.RIVLNM ? TybDetailDataList.RIVLNM : '--' }}</div></div></li>
                <li><div><div>断面名称</div><div>{{TybDetailDataList.CURVE ? TybDetailDataList.CURVE : '--' }}</div></div></li>
                <li><div><div>经度</div><div>{{TybDetailDataList.LGTD ? TybDetailDataList.LGTD : '--' }}</div></div></li>
                <li><div><div>纬度</div><div>{{TybDetailDataList.LTTD ? TybDetailDataList.LTTD : '--' }}</div></div></li>
               </ul>
            </div> 
        </el-row>
        <el-row>
          <div class="subtitle">洪水频率特征值</div>
            <div class="JibenTable">
              <ul>
                <li><div><div>5年一遇设计洪水位（m）</div><div>{{TybDetailDataList.Z5 ? TybDetailDataList.Z5 : '--' }}</div></div></li>
                <li><div><div>5年一遇洪峰流量（m³/s）</div><div>{{TybDetailDataList.Q5 ? TybDetailDataList.Q5 : '--' }}</div></div></li>
                <li><div><div>10年一遇设计洪水位（m）</div><div>{{TybDetailDataList.Z10 ? TybDetailDataList.Z10 : '--' }}</div></div></li>
                <li><div><div>10年一遇洪峰流量（m³/s）</div><div>{{TybDetailDataList.Q10 ? TybDetailDataList.Q10 : '--' }}</div></div></li>
                <li><div><div>20年一遇设计洪水位（m）</div><div>{{TybDetailDataList.Z20 ? TybDetailDataList.Z20 : '--' }}</div></div></li>
                <li><div><div>20年一遇洪峰流量（m³/s）</div><div>{{TybDetailDataList.Q20 ? TybDetailDataList.Q20 : '--' }}</div></div></li>
                <li><div><div>30年一遇设计洪水位（m）</div><div>{{TybDetailDataList.Z30 ? TybDetailDataList.Z30 : '--' }}</div></div></li>
                <li><div><div>30年一遇洪峰流量（m³/s）</div><div>{{TybDetailDataList.Q30 ? TybDetailDataList.Q30 : '--' }}</div></div></li>
                <li><div><div>50年一遇设计洪水位（m）</div><div>{{TybDetailDataList.Z50 ? TybDetailDataList.Z50 : '--' }}</div></div></li>
                <li><div><div>50年一遇洪峰流量（m³/s）</div><div>{{TybDetailDataList.Q50 ? TybDetailDataList.Q50 : '--' }}</div></div></li>
                <li><div><div>100年一遇设计洪水位（m）</div><div>{{TybDetailDataList.Z100 ? TybDetailDataList.Z100 : '--' }}</div></div></li>
                <li><div><div>100年一遇洪峰流量（m³/s）</div><div>{{TybDetailDataList.Q100 ? TybDetailDataList.Q100 : '--' }}</div></div></li>
                <li><div><div>200年一遇设计洪水位（m）</div><div>{{TybDetailDataList.Z200 ? TybDetailDataList.Z200 : '--' }}</div></div></li>
                <li><div><div>200年一遇洪峰流量（m³/s）</div><div>{{TybDetailDataList.Q200 ? TybDetailDataList.Q200 : '--' }}</div></div></li>
                <li><div><div>500年一遇设计洪水位（m）</div><div>{{TybDetailDataList.Z500 ? TybDetailDataList.Z500 : '--' }}</div></div></li>
                <li><div><div>500年一遇洪峰流量（m³/s）</div><div>{{TybDetailDataList.Q500 ? TybDetailDataList.Q500 : '--' }}</div></div></li>
               </ul>
            </div>
        </el-row>
  
      </div>
    </div>
  </template>
<script>


export default {
    components: { },
    data() {
        return {
            // 图片类型
            imgType: [
              {'name':'洪痕点图','ind':'0'},
              {'name':'受灾图','ind':'1'}
            ], 
            imgTypeNum:'0',
            // 历史洪痕页面数据
            TybDataList: [],
            // 洪痕点详情数据
            TybDetailDataList:{},
            parameter: {},
            PionId:undefined, //选中的点

        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        }
    },
    watch: {
        
    },
    created() {
        this.parameter = this.$store.getters.dlgParams.remarks
        this.getData() // 获取数据
        // console.log('点击的点',this.parameter);
        
    },
    methods: {
        // 获取数据
        getData(){
            this.TybDetailDataList =this.parameter
            
            // var url = `${mapConfig.resUrlPre}/geojson/${this.basin}/TYB.json`
            // this.$axios.get(url).then(res => {
            //     this.TybDataList = res.data.features;
            //     console.log('TYB数据',this.TybDataList);
                
            //     res.data.features.map((item) => {
            //         if(item.properties.PID == this.parameter.PID){
            //             this.TybDetailDataList = item;
            //             this.PionId=item.properties.PID
            //         }
            //     })
            // })
        },



       
    }
}
</script>
<style lang="less" scoped>
 .tab{
        border-bottom: 1px solid #335875;
        padding-bottom: 15px;
        height: auto;
        overflow: hidden;
    }
	/deep/.el-tabs__nav-scroll {
		justify-content: left !important;
	}

	.dialog_info {
    height: 100%;
    min-height:36vh;
    padding-top:10px;
    padding:10px 20px 20px  20px;
    box-sizing: border-box;
		.dialog_info_title {
			height: 100%;
			/deep/.el-tabs {
				height: 100%;
			}
		}

	}

	/deep/.el-tab-pane {
		height: 100%;
	}
	.water-table{
    height: calc(100% - 40px);
    padding:0px 20px;
    height: 700px;
	}
	.timeline {
		width: 100%;
		height: 97%;
		padding: 20px;
		overflow: auto;
		position: relative;
		color: #fff;

		.timelineList {
			display: -webkit-flex;
			display: flex;
			width: 100%;
			margin-bottom: 10px;

			.timeline_left {
				width: 200px;
				padding-right: 20px;
				text-align: right;

				.timeline_title {
					font-size: 16px;
					font-weight: bold;
					color: #00e9ff;
				}
			}

			.timeline_right {
				position: relative;
				padding-left: 3%;
				width: calc(~"100% - 220px");
			}

			.timeline_right:after {
				content: "";
				width: 16px;
				height: 16px;
				border-radius: 50%;
				background: #649ff4;
				box-shadow: 0 0 10px #3484f7;
				position: absolute;
				top: 0;
				left: -6px;
				z-index: 9;
			}
		}
	}

	.timeline::after {
		content: "";
		width: 3px;
		height: 100%;
		background: #1b1670;
		position: absolute;
		top: 0;
		left: 220px;
  }
  .noData{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin:0px;
  }

 

  //列表区域

  .JibenTable {
    width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
    margin-top: 10px;
    ul{
        display: flex;
        flex-wrap: wrap;
        background: rgba(0,165,233,0.2);
        font-size: 14px;
        padding: 0 10px ;
        width: 100%;
        li{
            box-sizing: border-box;
            width: 25%;
            border-bottom: 1px solid #3F72AA ;
            &>div{
              margin-bottom:10px ;
              margin-top:10px;
              border-left: 1px solid #3F72AA ;
              text-indent: 20px;
              background: url(../../assets/newimg/矩形.png) no-repeat left center;
              background-size: auto 66%;
              background-position:8px 8px ;
              &>:nth-child(1){
                color: #A5C2D8;
                margin-bottom: 4px;
              }
            }
        }
        &>:nth-last-child(1),>:nth-last-child(2),>:nth-last-child(3),>:nth-last-child(4){
          border: none;
        }
        &>:nth-child(1),>:nth-child(5),>:nth-child(9),>:nth-child(13){
          &>div{
              text-indent: 10px !important;
              border: none;
              background-position:0 8px !important ;
          }
        }
    }
}
  .JibenTable2 {
    width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
    margin-top: 10px;
    ul{
        display: flex;
        flex-wrap: wrap;
        background: rgba(0,165,233,0.2);
        font-size: 14px;
        padding: 0 10px ;
        width: 100%;
        li{
            box-sizing: border-box;
            width: 33%;
            border-bottom: 1px solid #3F72AA ;
            &>div{
              margin-bottom:10px ;
              margin-top:10px;
              border-left: 1px solid #3F72AA ;
              text-indent: 20px;
              background: url(../../assets/newimg/矩形.png) no-repeat left center;
              background-size: auto 66%;
              background-position:8px 8px ;
              &>:nth-child(1){
                color: #A5C2D8;
                margin-bottom: 4px;
              }
            }
        }
        &>:nth-last-child(1),>:nth-last-child(2),>:nth-last-child(3){
          border: none;
        }
        &>:nth-child(1),>:nth-child(4){
          &>div{
              text-indent: 10px !important;
              border: none;
              background-position:0 8px !important ;
          }
        }
    }
}

.rightDetailArea{
  margin-top: 20px;
}
.imgList {
    width: 610px;
    height: 487px;
    background: url(../../assets/dialog/tukuang.png) no-repeat center;
    background-size: 100% 100%;

    img {
        width: 100%;
        height: 100%;
    }

    /deep/.el-carousel__item,
    /deep/.el-carousel {
        //height: 220px;
        height: 100%;
    }
}

.noImgList {
    display: flex;
    justify-content: center;
    align-items: center;
    img{
    width:100px;
    height:120px;
    }
}

.subtitle{
  height: 28px;
  line-height: 0px;
  margin: 20px 0 4px 0;
  text-indent: 4px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #FFFFFF;
  background: url(../../assets/dialog/dialogBT.png) no-repeat center;
  background-size: 100% 100%;
}

</style>
